<script setup>
import { computed } from 'vue'
import { usePropertyStore } from '@/stores/property'

const propertyStore = usePropertyStore()
const gold = computed(() => propertyStore.gold)
const soul = computed(() => propertyStore.soul)
</script>

<template>
  <div class="money">
    <div class="item">
      <img class="icon" src="http://117.72.17.45:5500/data/icons/gold.webp" alt="gold" />
      <span class="value">{{ gold }}</span>
    </div>
    <div class="item">
      <img class="icon" src="http://117.72.17.45:5500/data/icons/green.webp" alt="green" />
      <span class="value">{{ soul }}</span>
    </div>
  </div>
  
</template>

<style scoped>
.money {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px; 
}
.item {
  display: inline-flex;
  align-items: center;
  gap: 12px; 
  padding: 8px 16px; 
  border-radius: 16px; 
  background: rgba(255, 255, 255, 0.25);
}
.icon {
  width: 52px;
  height: 52px;
}
.value {
  color: #fff;
  font-weight: 700;
  font-size: 30px; 
}
</style>


